<template>
  <div class="tabs-bar tabs-top-bar">
    <div class="tabs-extra-content" style="float: right;">
      <h2 class="tabs-module-title">
        <div class="tabs-main-title-wrap">
          <a href="#" target="_self" :title="item.name" class="tabs-main-title">{{item.name}}</a>
        </div>
      </h2>
    </div>
    <el-tabs @tab-click="handleClick" class="tab-pane">
      <el-tab-pane :label="childItem.name" v-for="childItem in item.children" :key="childItem.id">
        <component :is="componentName" :item-list="childItem.contentList" :type="type"></component>
      </el-tab-pane>
    </el-tabs>
    <router-link :to="{path: '/' + (type || 'learn') + '/list', query: {cid: cid}}">
      <a class="tabs-more" target="_blank">更多</a>
    </router-link>
  </div>
</template>

<script>
  import {ref} from "vue";
  import rowTabsContent from "./rowTabsContent";
  import twoRowTabsContent from "./bigRowTabsContent";
  export default {
    name: "tabsBar",
    components: {
      rowTabsContent,
      twoRowTabsContent,
    },
    props: {
      componentName: {
        type: String
      },
      item: {
        type: Object,
        required: true
      },
      type: {
        type: String
      }
    },
    setup(props) {
      let cid = ref(props.item.id)
      const handleClick = function(tab) {
        const item = props.item.children[tab.index]
        cid.value = item.id;
      }
      return {
        cid,
        handleClick
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tabs-bar {
    outline: none;
    margin: 0;
    border-bottom: none;
    white-space: nowrap;
    -webkit-transition: padding .3s cubic-bezier(.645,.045,.355,1);
    transition: padding .3s cubic-bezier(.645,.045,.355,1);
    .tabs-extra-content {
      float: none!important;
      display: inline;
      line-height: 40px;
      .tabs-module-title {
        font-weight: normal;
        float: left;
        color: #000;
        margin-left: 10px;
        font-size: 20px;
        margin-right: 10px;
        .tabs-main-title-wrap {
          display: inline-block;
          float: left;
          .tabs-main-title {
            float: left;
            color: #000;
            text-decoration: none;
          }
        }
      }
    }
    .tabs-more {
      position: absolute;
      right: 10px;
      top: 0;
      display: block;
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      margin-left: 20px;
      color: #999;
      &:hover {
        color: $--color-primary;
      }
    }
  }
</style>

<style lang="scss" scoped>
  ::v-deep .el-tabs__nav {
    width: calc(100% - 50px);
    overflow-x: auto;
    line-height: 40px;
  }
  ::v-deep .el-tabs__nav::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
  }
  ::v-deep .el-tabs__nav { -ms-overflow-style: none; }
  ::v-deep .el-tabs__nav { overflow: -moz-scrollbars-none; }
  ::v-deep .el-tabs__nav-wrap {
    //width: 100%;
    line-height: 40px;
    .el-tabs__active-bar {
      display: none;
    }
  }
  ::v-deep .el-tabs__nav-wrap::after {
    content: none !important;
    background: none!important;
  }
  ::v-deep .el-tabs__item {
    padding: 0 10px!important;
    border-radius: 14px;
    height: 40px;
    line-height: 40px;
    background: none;
  }
  ::v-deep .el-tabs__item:hover {
    background: none;
  }
  ::v-deep .el-tabs__item.is-active {
    font-weight: bold;
    background: none;
  }
  ::v-deep .el-tabs__item.is-active:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -0.7em;
    width: 1.4em;
    height: 2px;
    border-radius: 100px;
    background-color: $--color-primary;
  }
  ::v-deep .el-tabs__item:first-child {
    margin-left: 0!important;
  }
</style>
